<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<%
	request.setAttribute("accessPath", request.getContextPath());
%>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>正常点到</title>
	<link href="${ requestScope['accessPath']}/css/alerts/jquery.alerts.css" rel="stylesheet">

    <!-- Bootstrap Core CSS -->
    <link href="${ requestScope['accessPath']}/fontcss/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="${ requestScope['accessPath']}/fontcss/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="${ requestScope['accessPath']}/fontcss/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <%-- <link href="${ requestScope['accessPath']}/fontcss/bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet"> --%>

    <!-- Custom CSS -->
    <link href="${ requestScope['accessPath']}/fontcss/dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${ requestScope['accessPath']}/fontcss/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

	<link href="${ requestScope['accessPath']}/fontcss/css/jquery-labelauty.css" rel="stylesheet">
	
<style type="text/css">
	#page-wrapper {
		margin: 0 0 0 0px;
	}
	.list-group-item{
		border:0px;
	}
		ul {
	list-style-type: none;
		margin: 0px 0;
	}
	
	ul {
		margin: 0;
	}
	
	li {
		display: inline-block;
	}
	
	li {
		margin: 0;
	}
</style>
</head>

<body>

    <div id="wrapper">

        <div id="page-wrapper">
        <div class="row" id="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
							职位权限列表：
						</div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr >
                                            <th>序号</th>
                                            <th>职位</th>
                                            <th>操作</th>
                                            <!-- <th>定制班</th>
                                            <th>出勤</th>
                                            <th>迟到</th>
                                            <th>请假</th>
                                            <th>旷课</th> -->
                                        </tr>
                                    </thead>
                                    <tbody>
                                    	<c:forEach items="${permissionTypeList}" var="t" varStatus="s">
		                                    <tr>
		                                    	<td>${s.index + 1 }</td>
		                                    	<td>${ t.typeName }</td>
		                                    	<td>
			                                    	<ul >
				                                    	<li><button class="btn btn-info" data-id="${t.typeId }" data-toggle="modal" data-target="#myModal">修改</button></li>
				                                    	<li><button class="btn btn-danger" data-id="${t.typeId }" >删除</button></li>
			                                    	</ul>
		                                    	</td>
	                                    	</tr>
                                    	</c:forEach>
                                    	
                                    	<c:if test="${permissionTypeList == null || permissionTypeList.size() == 0 }">
                                    		<tr>
                                    			<td rowspan="3">
                                    				<div class="alert alert-success alert-dismissable">
						                                <button type="button" class="close" >×</button>
						                                <span>没有职位信息，请添加!</span>
						                                <span></span>
						                            </div>
                                    			</td>
                                    		</tr>
                                    	</c:if>
                                    </tbody>
                                </table>
                            </div>
                            <div class="panel-body" style="text-align:center;">
								<a class="btn btn-default btn-lg 
								<c:if test="${classCourse.hzClassDaycourse.isCheckins == 1 }">disabled</c:if> 
								submit-button" href="#">提交</a>                            	
                            </div>
                            <div class="alert alert-success alert-dismissable" style="display:none;">
                                <button type="button" class="close" >×</button>
                                <span>温馨提示:</span>
                                <span></span>
                            </div>
							<div class="alert alert-danger alert-dismissable" style="display:none;">
								<button type="button" class="close" >×</button>
								<span>错误提示:</span>
								<span></span>
							</div>
							
							<!-- Modal -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                            <h4 class="modal-title" id="myModalLabel">权限修改</h4>
                                        </div>
                                        <div class="modal-body">
	                                        <div class="row">
												<div class="col-sm-4">
													<div id="treeview-checkable" class=""></div>
												</div>
											</div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            <button type="button" class="btn btn-primary">保存</button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <!-- /.modal -->
							
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
           
        </div>
    </div>
    <!-- /#wrapper -->
    <!-- jQuery -->
    <script src="${ requestScope['accessPath']}/fontcss/bower_components/jquery/dist/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="${ requestScope['accessPath']}/fontcss/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="${ requestScope['accessPath']}/fontcss/bower_components/metisMenu/dist/metisMenu.min.js"></script>

    <!-- DataTables JavaScript -->
    <script src="${ requestScope['accessPath']}/fontcss/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
    <script src="${ requestScope['accessPath']}/fontcss/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="${ requestScope['accessPath']}/fontcss/dist/js/sb-admin-2.js"></script>

	<script src="${ requestScope['accessPath']}/fontcss/js/jquery-labelauty.js"></script>
    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    
    <!-- 自定义JS -->
    <script src="${ requestScope['accessPath']}/js/common/common.js"></script>
    <script src="${ requestScope['accessPath']}/js/bootstrap/bootstrap-treeview.js"></script>
	<script src="${ requestScope['accessPath']}/js/common/accessUrl.js"></script>
    <script>
    
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
        	"language": {
    	        
	        	  "sProcessing": "处理中...",
	        	        "sLengthMenu": "显示 _MENU_ 项结果",
	        	        "sZeroRecords": "没有匹配结果",
	        	        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
	        	        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
	        	        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
	        	        "sInfoPostFix": "",
	        	        "sSearch": "搜索关键字:",
	        	        "sUrl": "",
	        	        "sEmptyTable": "表中数据为空",
	        	        "sLoadingRecords": "载入中...",
	        	        "sInfoThousands": ",",
	        	        "oPaginate": {
	        	            "sFirst": "首页",
	        	            "sPrevious": "上页",
	        	            "sNext": "下页",
	        	            "sLast": "末页"
	        	        },
	        	        "oAria": {
	        	            "sSortAscending": ": 以升序排列此列",
	        	            "sSortDescending": ": 以降序排列此列"
	        	        }
	    },
	    "lengthChange": false,
	    "paging": true,
	    "info": true
        });
    });
    var $checkableTree;
	function treeMenu(data) {
		 $checkableTree = $('#treeview-checkable').treeview({
	        data: data,
	        levels:1,
	        showIcon: false,
	        showCheckbox: true,
	        onNodeChecked: function(event, node) {
	        	if ( node.parent) {
	        		$checkableTree.treeview('checkNode', [findCheckableNodess(node.parent)]);
	        	}
	        },
	        onNodeUnchecked: function (event, node) {
	        	if ( node.nodes) {
	        		for (var i = 0; i < node.nodes.length; i++) {
	        			$checkableTree.treeview('uncheckNode', [findCheckableNodess(node.nodes[i].text)]);
	        		}
	        	}
	        }
	      });
	};

	var findCheckableNodess = function(value) {
        return $checkableTree.treeview('search', [ value, { ignoreCase: false, exactMatch: false } ]);
      };
	
	 $('#btn-check-node.check-node').on('click', function (e) {
      $checkableTree.treeview('checkNode', [ findCheckableNodess('Parent 1')]);
    });
	
	 $('.btn-primary').click(function(){
		 var nodes = $checkableTree.treeview('getCheckedNodes');
     	debugger;
	 });
	 
	 $('.btn-info').click(function(){
		 if ($(this).attr('data-id')) {
			accessUrl('/configuration/editCompetence', 'positionId=' + $(this).attr('data-id'), 'POST', 'json', true);
		 }
	 });
	 function executeMethod(resultData) {
		 if (resultData) {
			 treeMenu(resultData);
			 
			for (var i = 0; i < resultData.length; i ++) {
				if (resultData[i].checked) {
					$checkableTree.treeview('checkNode', [findCheckableNodess(resultData[i].text)]);
				}
				if (resultData[i].nodes) {
					for (var j = 0; j < resultData[i].nodes.length; j++) {
						if (resultData[i].nodes[j].checked) {
							$checkableTree.treeview('checkNode', [findCheckableNodess(resultData[i].nodes[j].text)]);
						}
					}
				}
			}
		 }
	 }
    </script>
</body>

</html>
